<script setup lang="ts">
    import { ref, computed, watch, onMounted, reactive } from 'vue';
    import { showToast, showImagePreview } from 'vant';
    import { useOrderInfo } from '@/store/modules/evaluate'
    import API_ORDER from '@/apis/order';
    import { useI18n } from 'vue-i18n';
    const { t } = useI18n();
    // 组件属性
    const props = defineProps({
        show: {
            type: Boolean,
            default: false,
        },
        goodId: {
            type: String,
            default: '8',
        }
    });
    let appOrder = useOrderInfo()
    const emit = defineEmits(['closeLan', 'update:show']);

    // 响应式状态
    const isMobile = ref(false);
    const localShow = ref(props.show);
    let goodid = ref(props.goodId);
    // 状态管理
    const activeFilter = ref(0); // 当前激活的筛选标签
    const loading = ref(false); // 列表加载状态
    const finished = ref(false); // 列表是否加载完毕
    let paramsList = ref({
        goods_id: goodid,
        type: 'all',
        limit: 10,
        page: 1
    })

    let evaluations = ref([]); // 原始评价数据
    let tabsType = ref([
        {
            id: 0,
            key: 'all',
            name: '全部'
        },
        {
            id: 1,
            key: 'images',
            name: '有图'
        },
        {
            id: 2,
            key: 'good',
            name: '好评'
        },
        {
            id: 3,
            key: 'moderate',
            name: '中评'
        },
        {
            id: 4,
            key: 'bad',
            name: '差评'
        },
    ])

    // 加载更多评价
    const loadMoreEvaluations = async () => {
        if (finished.value) return;
        loading.value = true;
        let res = await API_ORDER.goodsCommentList(paramsList.value)
        if (res.code == 1) {
            loading.value = false;
            evaluations.value = [...evaluations.value, ...res.data.data]
            paramsList.value.page++;
            //   加载完毕
            if (paramsList.value.limit > res.data.data.length) {
                finished.value = true;
            }
        }

    };
    let previewImg = (data, index) => {
        showImagePreview({
            images: data,
            startPosition: index,
            closeable: true
        })
    }
    // 处理筛选标签切换
    const handleFilterChange = (num) => {
        activeFilter.value = num;
        paramsList.value.type = tabsType.value[num].key
        evaluations.value = []
        paramsList.value.page = 1; // 重置页码
        finished.value = false; // 重置加载状态
        loadMoreEvaluations(); // 重新加载数据
        showToast(`已切换到${num}评价`);
    };
    // 监听父组件传入的 show 变化
    watch(
        () => props.show,
        (newVal) => {
            localShow.value = newVal;
            paramsList.value.page = 1
            paramsList.value.type = 'all'
            loadMoreEvaluations();
        }
    );
    // 检测设备函数
    const checkDevice = () => {
        isMobile.value = window.innerWidth <= 768;
    };
    // 关闭弹窗
    const closePopup = () => {
        emit('closeLan');
    };

    const closeIcon = () => {
        emit('closeLan');
    };
    const closeMask = () => {
        emit('closeLan');
    };

    // 打开弹窗
    const openPop = () => {
        // 可以在这里添加初始化逻辑
    };
    // 初始化数据
    onMounted(() => {
        // 初始化设备检测
        window.addEventListener('resize', checkDevice);
        checkDevice();

    });
</script>
<template>
    <div>
        <van-popup v-model:show="localShow" round :position="isMobile ? 'bottom' : 'right'" :style="
                isMobile
                  ? { height: '90%', width: '100%' }
                  : { width: '30%', height: '90%' }
              " @click-close-icon="closeIcon" @opened="openPop" @click-overlay="closeMask">
            <div class="evaluation-list-container">
                <!-- 顶部导航栏 -->
                <van-nav-bar title="全部评价" class="nav-bar" />

                <!-- 筛选标签栏 -->
                <van-tabs v-model:active="activeFilter" class="filter-tabs" @change="handleFilterChange">
                    <van-tab :title="i.name" v-for="i in tabsType" :key="i.id">
                        <div style="height: 75vh;overflow: scroll">
                            <!-- 评价列表 -->
                            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多数据了"
                                @load="loadMoreEvaluations" class="evaluation-list">
                                <div v-for="(item, index) in evaluations" :key="index" class="evaluation-item"
                                    :border="false">
                                    <div class="evaluation-header">
                                        <div class="user-info">
                                            <!-- 用户名 -->
                                            <div class="flex al-center jus-bet marginT6">
                                                <div class="flex al-center">
                                                    <van-image round :src="item.user_avatar" class="user-avatar"
                                                        width="40" height="40" alt="用户头像" />
                                                    <div class="user-name">{{ item.user_nickname }}</div>
                                                </div>
                                                <!-- 评分星星 -->
                                                <van-rate v-model="item.level" readonly size="16" color="#FFB400"
                                                    class="margin6" />
                                            </div>

                                            <!-- 评价时间 -->
                                            <div class="evaluation-time">{{ item.createtime }}</div>
                                        </div>
                                        <!-- 评价点赞数 -->
                                        <div class="evaluation-likes">
                                            <van-icon name="good" size="16" class="like-icon" />
                                            <!-- <span class="like-count">{{ item.likeCount }}</span> -->
                                        </div>
                                    </div>
                                    <!-- 评价内容 -->
                                    <div class="evaluation-content" v-if="item.content">
                                        {{ item.content }}
                                    </div>
                                    <div class="flex al-center fl-warp ">
                                        <van-image width="72" height="72" class="pad6" v-for="(i,index) in item.images"
                                            fit="cover" @click="previewImg(item.images,index)" :key="index" :src="i" />
                                    </div>

                                </div>
                            </van-list>
                        </div>

                    </van-tab>
                </van-tabs>


            </div>
        </van-popup>
    </div>
</template>

<style lang="less" scoped>
    @import './index.less';
</style>